<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>权限管理</el-breadcrumb-item>
			<el-breadcrumb-item>角色列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片 -->
		<el-card class="box-card">
			<!-- 添加按钮区域 -->
			<el-row :gutter="20">
				<el-col :span="6">
					<el-input placeholder="请输入角色名称" v-model="query.roleName" clearable @clear="getRoleList">
						<el-button slot="append" icon="el-icon-search" @click="getRoleList"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" icon="el-icon-plus" @click="IsShowAdd=true">添加角色</el-button>
				</el-col>
			</el-row>

			<!-- 角色列表 -->
			<el-table :data="roleList" border style="width: 100%">
				<!-- 展开列 -->
				<el-table-column type="expand">
					<span>可以写一些详情</span>
				</el-table-column>
				<!-- 索引列 -->
				<el-table-column prop="id" label="ID" width="80"></el-table-column>
				<el-table-column prop="roleCode" label="编号" width="180"></el-table-column>
				<el-table-column prop="roleName" label="角色名称"></el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column label="操作" min-width="300">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" icon="el-icon-edit" @click="editRole(scope.row.id)">编辑</el-button>
						<el-button type="danger" size="mini" icon="el-icon-delete" @click="delRole(scope.row.id)">删除</el-button>
						<el-button type="warning" size="mini" icon="el-icon-share" @click="feipei(scope.row.id)">分配权限</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="query.page"
				:page-sizes="[10, 20, 30, 50]"
				:page-size="query.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>

			<AddRole :addRoleVisible="IsShowAdd" @IsShowAdd="changeShowAdd" @refreshData="getRoleList"></AddRole>
			<EditRole
				:editRoleVisible="IsShowEdit"
				:roleid="RoleID"
				@IsShowEdit="changeShowEdit"
				@refreshData="getRoleList"
			></EditRole>
			<allotRights :allotRightsVisible="IsShowRights" :roleid="RoleID" @IsallotRights="changeallotRights"></allotRights>
		</el-card>
	</div>
</template>

<script>
import AddRole from './AddRoles'
import EditRole from './EditRoles'
import allotRights from './AllotRights'//分配权限

export default {
	created() {
		this.getRoleList()
	},
	data() {
		return {
			roleList: [],
			query: {
				roleName: '',
				page: 1,
				limit: 10
			},
			total: 0,
			IsShowAdd: false,
			IsShowEdit: false,
			IsShowRights: false,
			RoleID: 0
		}
	},
	methods: {
		getRoleList() {
			this.$get('/api/Role/GetRoleList', this.query)
				.then(res => {
					if (res.code == 0) {
						this.roleList = res.data
						this.total = res.count
					}
				})
				.catch(err => {
					console.log(err)
				})
		},
		editRole(id) {
			console.log('修改')
			this.RoleID = id
			this.IsShowEdit = true
		},
		delRole(id) {
			console.log('删除')
			this.$confirm('是否删除此角色?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$get('/api/Role/DelRole', { roleid: id })
						.then(res => {
							if (res.code == 0) {
								this.$message({
									type: 'success',
									message: res.msg
                })
                this.getRoleList()
							} else {
								this.$message({
									type: 'info',
									message: res.msg
								})
							}
						})
						.catch(err => {
							console.log(err)
						})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},
		feipei(id) {
			console.log('分配权限')
			this.RoleID=id
			this.IsShowRights=true

		},
		handleSizeChange(val) {
			this.query.limit = val
			this.getRoleList()
		},
		handleCurrentChange(val) {
			this.query.page = val
			this.getRoleList()
		},
		//关闭或打开添加角色的监听
		changeShowAdd(val) {
			this.IsShowAdd = val
		},
		changeShowEdit(val) {
			this.IsShowEdit = val
			console.log(val)
		},
		changeallotRights(val){
			this.IsShowRights=val.IsShow
		}
	},
	components: {
		AddRole,
		EditRole,
		allotRights
	}
}
</script>

<style lang="stylus" scoped></style>